<template>
  <div>
    <!-- <page2musicList :Id="1" :MusicAuthor="2" :MusicId="3" :MusicName="4"
     :MusicUrl="5" :UserId="6"></page2musicList>
     <page2musicList :Id="1" :MusicAuthor="2" :MusicId="3" :MusicName="4"
     :MusicUrl="5" :UserId="6"></page2musicList> -->
     <!-- <van-search v-model="value" placeholder="请输入搜索关键词" /> -->

     <van-row>
      <van-col span="2">
    <!-- 根据标签标签获取音乐内容 -->
    <!-- <van-button  @click="showPopup"   round  icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E7%B1%BB%E5%9E%8B.png"  ></van-button> -->
         <div style="display: flex;justify-content: center;align-items: center; " >
          <van-icon  size="2rem" @click="showPopup"  name="http://rul4y8e5f.hn-bkt.clouddn.com/%E7%B1%BB%E5%9E%8B.png"></van-icon>
        </div>
      </van-col>
      <van-col span="22">
          <form action="/">
            <van-search
              v-model="searchValue"
              show-action
              shape="round"
              placeholder="请输入搜索关键词"
              @search="onSearch"
              @cancel="onCancel"
            />
        </form>
        
      </van-col>
    </van-row>


      
    <!-- 分页 -->
   
    <van-pagination v-model="this.current" 
    :total-items="this.total"
     :show-page-size="5"
     :items-per-page="this.pageSize"
    force-ellipses
    @change="pageChange"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>


      <!-- 右侧弹出 -->
      <van-popup v-model="showType" round lock-scroll=false  position="top" :style="{ height: '50%' } " >
      <!-- <h1>选择音乐类型</h1> -->
      <div style="overflow:scroll; height: auto;" >
            
            <van-picker
            title="请选择音乐类型"
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel2"
          />

          </div>
      </van-popup>
        
     <van-list
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <page2musicList
        v-for="item in list"
        :key="item.musicId"
        :Id="item.musicId"
        :UserId="item.musicUploaderId"
        :MusicId="item.musicId"
        :MusicName="item.musicName"
        :MusicAuthor="item.musicAuthor"
        :MusicIcon="item.musicIcon"
        :MusicUrl="item.musicUrl"
        :MusicDescription="item.musicDescription"
        >
        </page2musicList>
    </van-list>

  

</div>
</template>

<script>
import page2musicList from './page2musicList.vue'
import MusicAPI from '@/api/MusicAPI.js'
// import Page2musicList from './page2musicList.vue'
export default {
name: 'HomeMusicList',
components: { page2musicList },

data() {
  return {
    showType: false,
    searchValue:"",
    columns:[],
    labelList:[],
    list:[],
    // 页码
    pageNumber: 0,
    // 页大小
    pageSize: 8,
    // 当前页码
    current: 0,
    // 总条数
    total: 0,

  }
},


created() {
// 首次获取页面结果
this.getThisPage2List()

},
methods: {

  // 获取音乐标签list
  getLabelList(){
    var result = MusicAPI.GetAllLabel()
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.labelList=val.data
          // 将label的labelName放入colums
          for (let i = 0; i < this.labelList.length; i++) {
            this.columns.push(this.labelList[i].labelName) 
          }
         
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    
  },

  
  onConfirm(value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`);
      // this.$toast(this.labelList[index].labelName + this.labelList[index].labelId);
      // this.showType=false;
      this.getMusicByLabelId(this.labelList[index].labelId);

    },
 
    onCancel2() {
      // this.$toast('取消');
      this.showType=false
    },

    // 根据labelId获取音乐信息更新list
    getMusicByLabelId(labelId){
      var result = MusicAPI.SelectMusicByLabelId(labelId)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.list=val.data
          this.current = 0
          this.total =  0
          this.showType=false
        }else{
          this.$toast(val.errorMsg)
          this.showType=false
        }
            })
    },


  showPopup(){
    this.showType=true;
    this.getLabelList();
  },
  // 搜索
  onSearch(searchValue) {
    // this.$toast(searchValue);

    var result = MusicAPI.SelectMusic(searchValue)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.list=val.data
          this.current = 0
          this.total =  0
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    
    },
    onCancel() {
      this.$toast('取消');
    },

    // 页码改变时
    pageChange(val){
      this.pageNumber=val ;
    this.getThisPage2List();
    },

    getThisPage2List(){        
        var result = MusicAPI.AllMusic(this.pageNumber,this.pageSize)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.list=val.data.records
          this.current = val.data.current
          this.total =  val.data.total
          console.log(this.data);
     
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    },
},
props: {
  //  musiclist: {
  //   require: true
  //   ty
  //  }
},
}
</script>

<style>

</style>